{% extends 'base.html' %}
{% load static %}

{% block title %}编辑资料（修改个人信息） - 本地有约{% endblock %}
{% block extra_css %}
    <style>
     .form-label{
            position: static !important;
            display: block !important;  /* 确保显示 */
            opacity: 1 !important;     /* 确保不透明 */
            visibility: visible !important; /* 确保可见 */
            margin-bottom: 0.5rem !important;
     }
     .card-body{
        text-align: left;
    }
</style>
{% endblock %}



{% block content %}
<div class="container mt-4">
    <div class="row justify-content-center">
        <div class="col-lg-8">
            <div class="card shadow">
                <div class="card-header bg-success text-white">
                    <h4 class="mb-0"><i class="bi bi-pencil-square"></i> 编辑个人资料</h4>
                </div>
                <div class="card-body">
                    <form method="post" enctype="multipart/form-data" id="profile-edit-form">
                        {% csrf_token %}
                        
                        <!-- 头像上传 -->
                        <div class="row mb-4">
                            <div class="col-md-3 text-center">
                                <div class="avatar-upload-container">
{#                                    {% if user.avatar %}#}
{#                                    <img id="avatar-preview" src="{{ user.avatar.url }}" class="user-avatar-large mb-3" alt="{{ user.username }}">#}
{#                                    {% else %}#}
{#                                    <i id="avatar-default" class="bi bi-person-circle text-muted" style="font-size: 8rem;"></i>#}
{#                                    {% endif %}#}
                                    <!-- 使用新的头像URL方法 -->
{#                                    <img id="avatar-preview" src="{{ user.get_avatar_url }}" class="user-avatar-large mb-3" alt="{{ user.username }}" style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%;">#}
                                    {% if user.avatar %}
                                        <img src="{{ user.get_avatar_url }}"
                                             class="user-avatar-large mb-3"
                                             alt="{{ user.username }}"
                                             style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%;"
                                             onerror="this.src='{% static 'imgs/default-avatar.jpg' %}'">
                                    {% else %}
                                        <img src="{% static 'imgs/default-avatar.jpg' %}"
                                             class="user-avatar-large mb-3"
                                             alt="{{ user.username }}"
                                             style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%;">
                                    {% endif %}
                                    <div class="mt-2">
                                        <label for="avatar-upload" class="btn btn-sm btn-outline-primary">
                                            <i class="bi bi-camera"></i> 更换头像
                                        </label>
                                        <input type="file" id="avatar-upload" name="avatar" accept="image/jpeg,image/png,image/gif" class="d-none">
                                    </div>
                                    <!-- 可选：保留专门上传链接 -->
{#                                    <div class="mt-2">#}
{#                                        <a href="{% url 'users:update_avatar' %}" class="btn btn-sm btn-outline-info">#}
{#                                            <i class="bi bi-arrow-clockwise"></i> 专门上传#}
{#                                        </a>#}
{#                                    </div>#}

                                </div>
                            </div>
                            <div class="col-md-9">
                                <!-- 用户名（不可编辑） -->
                                <div class="mb-3">
                                    <label for="username" class="form-label">用户名</label>
                                    <input type="text" class="form-control" id="username" value="{{ user.username }}" readonly>
                                    <div class="form-text">用户名不可更改</div>
                                </div>
                                
                                <!-- 昵称 -->
                                <div class="mb-3">
                                    <label for="nickname" class="form-label">昵称</label>
                                    <input type="text" class="form-control" id="nickname" name="nickname" 
                                           value="{{ user.nickname|default:'' }}" maxlength="50">
                                    <div class="form-text">昵称将显示给其他用户</div>
                                </div>
                            </div>
                        </div>
                        
                        <!-- 个性签名 -->
                        <div class="mb-3">
                            <label for="signature" class="form-label">个性签名</label>
                            <textarea class="form-control" id="signature" name="signature" rows="3" 
                                      maxlength="200">{{ user.signature|default:'' }}</textarea>
                            <div class="form-text">
                                <span id="signature-counter">0</span>/200 字符
                            </div>
                        </div>
                        
                        <!-- 兴趣标签 -->
                        <div class="mb-3">
                            <label for="interests" class="form-label">兴趣标签</label>
                            <input type="text" class="form-control" id="interests" name="interests" 
                                   value="{{ user.interests|default:'' }}" maxlength="500">
                            <div class="form-text">用空格分隔多个兴趣标签，例如：旅行 摄影 美食</div>
                        </div>
                        
                        <!-- 隐私设置 -->
                        <div class="mb-4">
                            <h5 class="mb-3">隐私设置</h5>
                            
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="show_phone" name="show_phone" 
                                       {% if user.show_phone %}checked{% endif %}>
                                <label class="form-check-label" for="show_phone">
                                    公开手机号
                                </label>
                            </div>
                            
                            <div class="form-check form-switch mb-2">
                                <input class="form-check-input" type="checkbox" id="show_email" name="show_email" 
                                       {% if user.show_email %}checked{% endif %}>
                                <label class="form-check-label" for="show_email">
                                    公开邮箱地址
                                </label>
                            </div>
                            
                            <div class="form-check form-switch">
                                <input class="form-check-input" type="checkbox" id="show_activities" name="show_activities" 
                                       {% if user.show_activities %}checked{% endif %}>
                                <label class="form-check-label" for="show_activities">
                                    公开活动记录
                                </label>
                            </div>
                        </div>
                        
                        <!-- 按钮组 -->
                        <div class="d-flex justify-content-between">
                            <a href="{% url 'users:profile' %}" class="btn btn-outline-secondary">
                                <i class="bi bi-arrow-left"></i> 返回个人中心
                            </a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-lg"></i> 保存更改
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 头像预览功能
        const avatarUpload = document.getElementById('avatar-upload');
        const avatarPreview = document.getElementById('avatar-preview');
        const avatarDefault = document.getElementById('avatar-default');
        
        if (avatarUpload) {
            avatarUpload.addEventListener('change', function(e) {
                const file = e.target.files[0];
                if (file) {
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        // 如果已有预览图，更新它
                        if (avatarPreview) {
                            avatarPreview.src = e.target.result;
                        } else {
                            // 如果没有预览图，创建一个
                            if (avatarDefault) {
                                avatarDefault.style.display = 'none';
                            }
                            
                            const newAvatar = document.createElement('img');
                            newAvatar.id = 'avatar-preview';
                            newAvatar.src = e.target.result;
                            newAvatar.className = 'user-avatar-large mb-3';
                            newAvatar.alt = '{{ user.username }}';
                            
                            const container = document.querySelector('.avatar-upload-container');
                            container.insertBefore(newAvatar, container.firstChild);
                        }
                    };
                    reader.readAsDataURL(file);
                }
            });
        }
        
        // 个性签名字符计数
        const signatureField = document.getElementById('signature');
        const signatureCounter = document.getElementById('signature-counter');
        
        if (signatureField && signatureCounter) {
            // 初始化计数器
            signatureCounter.textContent = signatureField.value.length;
            
            // 监听输入变化
            signatureField.addEventListener('input', function() {
                signatureCounter.textContent = this.value.length;
            });
        }
        
        // 表单提交处理
        const profileForm = document.getElementById('profile-edit-form');
        if (profileForm) {
            profileForm.addEventListener('submit', function(e) {
                // 可以在这里添加更多客户端验证
                // 例如：检查昵称是否为空等
                
                // 显示加载状态
                const submitBtn = this.querySelector('button[type="submit"]');
                const originalText = submitBtn.innerHTML;
                submitBtn.innerHTML = '<i class="bi bi-hourglass-split"></i> 保存中...';
                submitBtn.disabled = true;
                
                // 表单将通过正常方式提交到服务器
                // 不需要阻止默认行为，除非有特殊需求
            });
        }
    });
</script>

<style>
.user-avatar-large {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #f8f9fa;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.tag {
    display: inline-block;
    background-color: #e9ecef;
    padding: 0.25rem 0.5rem;
    margin: 0.125rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
}

.card {
    border: none;
    border-radius: 0.5rem;
}

.card-header {
    border-radius: 0.5rem 0.5rem 0 0 !important;
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd;
}
</style>
{% endblock %}